@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */
html, body {
 background:#000;
 height:100%;
 overflow:hidden;
}
* {
 padding: 0;
 margin: 0;
}
body{
	background-color:#000;
	color:#ddd;
}
/* Preloader */
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000; /* change if the mask should have another color then white */
	z-index: 99; /* makes sure it stays on top */
}
#status {
	width: 100px;
	height: 100px;
	position: absolute;
	left: 46%; /* centers the loading animation horizontally one the screen */
	top: 40%; /* centers the loading animation vertically one the screen */
	background:#000 url(img/loader.gif); /* path to your loading animation */
	background-repeat: no-repeat;
	background-position: center;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	/* is width and height divided by two */
}
#logo {
	position: absolute;
	left: 46%; /* centers the loading animation horizontally one the screen */
	top: 40%; /* centers the loading animation vertically one the screen */
}
.select {
	position: relative;
	left: 40%; /* centers the loading animation horizontally one the screen */
	top: -100%; /* centers the loading animation vertically one the screen */
}
#splash{
	position:absolute;
	top:-100%;
	left:0;
	height:100%;
	width:100%;
	background:#0CF url(img/1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	z-index:1;
}
#form{
	position:absolute;
	top:0;
	right:-100%;
	height:100%;
	width:100%;
	background:#0CF url(img/2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	z-index:1;
}
.heading{
	position:absolute;
	top:30%;
	left:-100%;
	z-index:1;
}
.heading h1{font-family:'Oswald';
	letter-spacing:3px;
	font-weight:normal;
	font-size:30px;
	margin-bottom:10px;
	padding:5px;
	float:left;
	
}
#bar_loader{
	position:absolute;
	bottom:0px;
	left:0;
	background:rgba(255,255,255,0.9);
	width:0px;
	height:5px;z-index:8;
}
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#buttonContainer{
	position:absolute;
	z-index:3;
	bottom:-100%;
	left:50%;
}
.myButton1 {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
	background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
	background-color:#f9f9f9;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:8px 24px;
	width:100px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.myButton1:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
	background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
	background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
	background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
	background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
	background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
	background-color:#e9e9e9;
}
.myButton1:active {
	position:relative;
	top:1px;
}

.myButton2 {
	-moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
	-webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
	box-shadow:inset 0px 1px 0px 0px #bee2f9;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf));
	background:-moz-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
	background:-webkit-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
	background:-o-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
	background:-ms-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
	background:linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf',GradientType=0);
	background-color:#63b8ee;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #3866a3;
	display:inline-block;
	cursor:pointer;
	color:#14396a;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:8px 24px;
	width:100px;
	text-decoration:none;
	text-shadow:0px 1px 0px #7cacde;
}
.myButton2:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee));
	background:-moz-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
	background:-webkit-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
	background:-o-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
	background:-ms-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
	background:linear-gradient(to bottom, #468ccf 5%, #63b8ee 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee',GradientType=0);
	background-color:#468ccf;
}
.myButton2:active {
	position:relative;
	top:1px;
}


/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media (max-width: 320px) {
.gridContainer {
	width: 88.2%;
	max-width: 1232px;
	padding-left: 0.9%;
	padding-right: 0.9%;
	margin: auto;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#status {
	width: 72px;
	height: 72px;
	position: absolute;
	left: 40%;
	top:40%;

}
#logo {
	left: 35%;
	top: 35%;
}
.heading h1{
	letter-spacing:2px;
	font-size:16px;
}
.select {
	left: 25%;
}
#bar_loader{
	position:absolute;
	bottom:0;
	left:0;
	background:rgba(255,255,255,0.6);
	width:0px;
	height:10px;z-index:8;

}
#buttonContainer{
	position:absolute;
	z-index:3;
	bottom:-100%;
	left:20%;
}
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
}
}
@media (min-width: 321px) and (max-width: 480px) {

.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#status {
	width: 72px;
	height: 72px;
	position: absolute;
	left:40%; /* centers the loading animation horizontally one the screen */
	top: 40%; /* centers the loading animation vertically one the screen */

}
#logo {
	left: 35%; /* centers the loading animation horizontally one the screen */
	top: 40%; /* centers the loading animation vertically one the screen */
}
.select {
	left: 25%;
}
.heading h1{
	letter-spacing:2px;
	font-size:20px;
}
#bar_loader{
	position:absolute;
	bottom:0;
	left:0;
	background:rgba(255,255,255,0.6);
	width:0px;
	height:10px;z-index:8;
}#buttonContainer{
	position:absolute;
	z-index:3;
	bottom:-100%;
	left:22%;
}
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media (min-width: 481px) and (max-width: 800px) {

.gridContainer {
	width: 88.2%;
	max-width: 1232px;
	padding-left: 0.9%;
	padding-right: 0.9%;
	margin: auto;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#status {
	width: 72px;
	height: 72px;
	position: absolute;
	left: 46%;
	top:40%;

}
#logo {
	left: 44%; /* centers the loading animation horizontally one the screen */
	top: 40%; /* centers the loading animation vertically one the screen */
}
.select {
	left: 40%;
}
.heading h1{
	letter-spacing:2px;
	font-size:24px;
}
#bar_loader{
	position:absolute;
	bottom:0;
	left:0;
	background:rgba(255,255,255,0.6);
	width:0px;
	height:10px;z-index:8;
}#buttonContainer{
	position:absolute;
	z-index:3;
	bottom:-100%;
	left:38%;
}
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
}
}
@media (min-width: 801px){
	
.gridContainer {
	width: 88.2%;
	max-width: 1232px;
	padding-left: 0.9%;
	padding-right: 0.9%;
	margin: auto;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#status {
	width: 72px;
	height: 72px;
	position: absolute;
	left: 46%;
	top:40%;

}
#logo {
	left: 46%; /* centers the loading animation horizontally one the screen */
	top: 40%; /* centers the loading animation vertically one the screen */
}
.select {
	left: 45%;
}
.heading h1{
	letter-spacing:2px;
	font-size:30px;
}
#bar_loader{
	position:absolute;
	bottom:0;
	left:0;
	background:rgba(255,255,255,0.6);
	width:0px;
	height:10px;z-index:8;
}#buttonContainer{
	position:absolute;
	z-index:3;
	bottom:-100%;
	left:45%;
}
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
}
}